<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>线路详情页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/list-to-detail.css" />
		<link href="../../iconfont/iconfont.css" rel="stylesheet" />
		<style type="text/css">
			.mui-icon-closeempty:before {content: '\e460';font-size: 52px;color: #35d0c9;}
			a.cardLink{width: 49%;min-height: 44px;line-height: 44px;text-align: center;background-color: #35d0c9;color: #fff;}
			.mui-bar-tab .footLink.mui-tab-item.mui-active {background-color: #35d0c9;color: #fff;}
			li.dateList{padding: 12px !important;}
			li.dateList span{font-size: 14px; color:#323232;}
			.dateItem{width: 33.33333% !important;border: solid 2px #35D0C9;margin-right: 3px;font-size: 14px !important;color: #333333;}
			.dateUl{background-color: transparent;}
			.xinlu_infor{background-color: #ffffff;}
			.dateItemUl{background-color: transparent;}
			.calendar-container{display: none;position: absolute;z-index: 999;}
			i.jiange{font-style: normal;visibility: hidden;}
			.xinlu_info dl dd{margin: 10px;}
			.sellPoint{border-top: #35d0c9 2px dashed;border-bottom: #35d0c9 2px dashed;}
			.sellPoint span{padding: 10px;text-align: center;display: inline-block;width: 100%;}
			.mui-icon-star-filled:before {content: '\e438';color: #35d0c9;}
			.sellPoint p{padding: 10px;text-align: center;}
			.circuit{}
			.circuit ul{padding: 10px;}
			.circuit ul li{list-style: none;margin-bottom: 12px;width: 100px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;background-color: #35d0c9;display: inline-block;}
			.circuit ul li a{color: #fff;display: inline-block;width: 100px;text-align: center;font-size: 14px;padding: 6px;}
			#cirItem1 dl dd{margin-left: 3px;}
			button.more{margin: 10px auto;background-color: transparent;color: palevioletred;border: solid 2px #35D0C9;border-radius: 10px; padding: 4px;width: 38%;}
			div.xinluDes{position: absolute !important;opacity: 0.5 !important;background: #000 !important;color: #fff !important;height: 50px !important;font-family: '微软雅黑';font-size: 18px !important;bottom: 5px !important;line-height: 50px !important;box-shadow: 0px 0px 6px #000;http://127.0.0.1:8020/travel/img/xianlu_pic3.jpg}
			img.xinluImg{height: 200px !important;}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {background-color: #35d0c9;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {color: #35D0C9;border-bottom: 2px solid #007aff; background: 0 0;}
			img.freeImg{line-height: 100px !important;max-width: 150px !important;height: 100px !important;}
			p.freeDes{white-space: normal !important;}
			.tripGroup dl dd{margin-left: 0px;padding: 4px;}
		</style>
	</head>

	<body>
		<div class="mui-content mui-scroll" style="margin-bottom: 50px;">
			<!--顶部banner图 开始-->
			<div id="kr-article-banner" class="kr-article-banner">
				<div id="kr-article-litpic" class="kr-article-litpic">
					<img :src="litpic" style="width: 100%;">
				</div>
				<h2 id="kr-article-title" class="kr-article-title">{{title}}</h2>
			</div>
			<!--顶部banner图 结束-->
			
			<!--此线路简介  s-->
            <div class="xinlu_infor  ">
		            	<ul class="mui-table-view dateUl">
		            	    <li class="mui-table-view-cell mui-media">
		            	        <a href="javascript:;">
		            	            <div class="mui-media-body mui-ellipsis" style="color: #000000;">
		            	               {{title}}
		            	            </div>
		            	             <span style="color: orangered;" id="storeprice" class="storeprice_z">{{storeprice}}元/人</span>
		            	        </a>
		            	    </li>
		                   <!--销量和满意度-->
		             		<ul class="mui-table-view mui-grid-view mui-grid-12 subCash">
								<li class="mui-table-view-cell mui-media mui-col-xs-6 sublist1 sublist">
									<a href="#">
										<span class="mui-icon iconfont icon-jifen1"></span>
										<div class="mui-media-body">销量<span id="xiaoliang"></span></div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-6 sublist2 sublist">
									<a href="#">
										<span class="mui-icon iconfont icon-weibiaoti2fuzhi02"></span>
										<div class="mui-media-body">满意度<span id="manyidu"></span></div>
									</a>
								</li>
							</ul>
		                   <!--销量和满意度-->
		            	    <li class="mui-table-view-cell">
		            	    	<div class="mui-slider">
		            	    		<p style="color: orangered;margin-bottom: 11px;" id="dateMsg"><i id="info" style="font-style: normal;">2017-6-28（周三出发）</i><span><a class="mui-pull-right" id="date" style="color: #35D0C9;">日期选择</a></span></p>
		            	    	  	<div class="mui-slider-group">
		            	    	    	<!--第一个内容区容器  s-->
				            	    	    <div class="mui-slider-item mui-col-xs-4 dateItem">
				            	    	      <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
				            	    	          <li class="mui-table-view-cell mui-media  dateList">
				            	    	          		<span>06-28<i style="visibility: hidden;">z</i>周三</span>
				            	    	                <span>￥1580</span>
				            	    	          </li>
				            	    	        
				            	    	      </ul>
				            	    	    </div>
				            	    	<!--第一个内容容器   e-->
		            	    	    	<!--第二个内容区       s-->
		            	    	    		<div class="mui-slider-item mui-col-xs-4 dateItem">
		            	    	      			<!-- 具体内容 -->
				            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
				            	    	          <li class="mui-table-view-cell mui-media  dateList">
				            	    	                 <span>06-29<i style="visibility: hidden;">z</i>周四</span>
				            	    	                 <span >￥1580</span>
				            	    	          </li>
				            	    	      </ul>
		            	    	   			 </div>
		            	    	   		 <!--第三个内容区  s-->
		            	    	     		<div class="mui-slider-item mui-col-xs-4 dateItem">
		            	    	     		 <!-- 具体内容 -->
				            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
				            	    	          <li class="mui-table-view-cell mui-media  dateList">
				            	    	                 <span>06-30<i style="visibility: hidden;">z</i>周五</span>
				            	    	                 <span>￥1580</span>
				            	    	          </li>
				            	    	      </ul>
		            	    	    		</div>
		            	    	    	<!--第三个内容区  e-->
		            	    	   		 <!--第四个内容区  s-->
		            	    	     		<div class="mui-slider-item mui-col-xs-4 dateItem">
				            	    	      <!-- 具体内容 -->
				            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
				            	    	          <li class="mui-table-view-cell mui-media  dateList">
				            	    	                 <span>07-01<i style="visibility: hidden;">z</i>周六</span>
				            	    	                 <span>￥1580</span>
				            	    	          </li>
				            	    	      </ul>
		            	    	   			 </div>
		            	    	    	<!--第四个内容区  e-->
		            	    	    	<!--第五个内容区  s-->
				            	    	     <div class="mui-slider-item mui-col-xs-4 dateItem">
						            	    	      <!-- 具体内容 -->
						            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
						            	    	          <li class="mui-table-view-cell mui-media  dateList">
						            	    	                 <span>07-02<i style="visibility: hidden;">z</i>周日</span>
						            	    	                 <span>￥1580</span>
						            	    	          </li>
						            	    	      </ul>
				            	    	   	 </div>
		            	    	   		<!--第五个内容区  e-->
		            	    	    	<!--第六个内容区  s-->
				            	    	     <div class="mui-slider-item mui-col-xs-4 dateItem">
				            	    	      <!-- 具体内容 -->
				            	    	       <ul class="mui-table-view mui-grid-view dateItemUl" style="padding: 0px !important;">
				            	    	          <li class="mui-table-view-cell mui-media  dateList">
				            	    	                 <span>07-03<i style="visibility: hidden;">z</i>周一</span>
				            	    	                 <span>￥1580</span>
				            	    	          </li>
				            	    	      </ul>
				            	    	    </div>
		            	    	    	<!--第六个内容区  e-->
		            	    	  </div>
		            	    	</div>
		            	    </li>
		            	</ul>
		            <!--产品信息      s-->
		            <div class="xinlu_info">
		            	<dl>
		            		<dd>产品编号<i class="jiange">银</i><span id="mianhao">3773357672</span></dd>
		            		<dd>出发到达<i class="jiange">音</i><span id="chufa">北京-渭南、西安</span><span id="daoda"></span></dd>
		            		<dd>出游天数<i class="jiange">音</i><span id="tripDays">跟团游；4天3晚</span><span id="tripDays2"></span></dd>
		            		<dd>交通方式<i class="jiange">音</i><span id="ways">火车去火车回</span></dd>
		            		<dd>住宿标准<i class="jiange">音</i><span id="zhusu">2晚舒适型住宿；1晚经济型住宿</span></dd>
		            	</dl>
		            </div>
		            <!--产品信息      e-->
		            <!--供应商说卖点  s-->
		            <div class="sellPoint">
		            	<span><a class="mui-icon mui-icon-star-filled" style="font-size: 22px;"></a><a class="mui-icon mui-icon-star-filled"></a>供应商说卖点<a class="mui-icon mui-icon-star-filled"></a><a class="mui-icon mui-icon-star-filled" style="font-size: 22px;"></a></span>
		            	<p id="maidian">听华阴老腔、品美食自助餐、赠明城墙、大明宫电瓶商</p>
		            </div>
		            <!--供应商说卖点  e-->
		            <!--线路相关     s-->
		            <div class="circuit" style="overflow: auto;"> 
			            <div class="mui-slider" style="background-color: #fff;">
						    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						        <a class="mui-control-item item mui-active zs" href="#item1" id="test1">费用信息</a>
						        <a class="mui-control-item item zs" href="#item2">线路特色</a>
						        <a class="mui-control-item item zs" href="#item3">行程介绍</a>
						        <a class="mui-control-item item zs" href="#item4">预定须知</a>
						    </div>
						    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
						    <div class="mui-slider-group tripGroup">
						      <div id="item1" class="mui-slider-item mui-control-content mui-active zItem">
						        <dl>
			             			<dt style="text-align: center;">费用包含</dt>
			             			<dd>交通：含北京首都机场至西安咸阳机场经济舱机票（出发时间为我公司指定航班）</dd>
			             			<dd>含机场建设费和燃油附加税往返程经济舱机票（含税）</dd>
			             			<dd>住宿：包含该5晚行程所列参考酒店或同等级酒店住宿升级为C等酒店（商务型酒店）加收50人/晚；升级为D等酒店（未挂牌四星酒店）加收80人/晚</dd>
			             			<dd>用餐：行程中团队标准用餐，2早餐2正餐<br>
			             			    早餐为酒店赠送，不吃不退，正餐：一餐为自助餐，一餐为观众6大碗，四餐为8菜1汤桌餐
			             			</dd>
			             		 </dl>
						      </div>
						        <!--线路特色   s-->
						      <div id="item2" class="mui-slider-item mui-control-content zItem">
						            <dl>
						            	<dt style="text-align: center;">线路特色</dt>
						            	<dd>玩嗨：西安首家联手韩国TBS团队倾情打造参与式美食娱乐活动【发现.回坊】，五个任务，若干小队
						            	在美食向导精心设计的游戏环节中寻“饱”，赢，精美礼品；
						            	</dd>
						            	<dd>咥美：坊上美食文化街【回民街】，一站式吃遍陕西美食；</dd>
						            	<dd>超值：赠送欣赏大明宫景区内3D IMIX电影《大明宫传奇》</dd>
						            	<dd>贴心：提供免费休息等候区</dd>
						            	<dd>无忧：全程优秀团队化操作</dd>
						            </dl>
						        </div>
						        <!--线路特色   e-->
						        <!--行程介绍   s-->
						      <div id="item3" class="mui-slider-item mui-control-content zItem">
						            <dl>
							            <dt style="text-align: center;">行程介绍</dt>
							            <dd>【全天安排】</dd>
							            <dd>【北京首都机场】自行乘坐航班前往文明古都【西安咸阳机场】，抵达西安咸阳机场后，我公司接站员在机场接站，
							            	送入酒店入住，根据抵达时间自由活动。
							            </dd>
							            <dd>【机票信息】</dd>
							            <dd>1.包含了【北京首都机场】-【西安咸阳机场】经济舱往返特价机票，出发时间为约定好的航班。</dd>
							            <dd>【温馨提示】</dd>
							            <dd>因散客拼团，每批游客的火车/航班抵达时间不同，抵达后需要等候的情况，希望您见谅。</dd>
							            <dd>【美食推荐】</dd>
						            </dl>
						        </div>
						        <!--行程介绍  e-->
						        <!--预定须知   s-->
						      <div id="item4" class="mui-slider-item mui-control-content zItem">
						            <dl>
						            	<dd>【选择线路】在Qunar频道选择线路</dd>
						            	<dd>【填写订单】完成预订信息的填写，点击“确认订单”按钮之后，我们将向您发送短信，以确认收到您的订单</dd>
						            	<dd>【在线支付】及时确认产品，下单后即可通过网银或支付平台进行支付。</dd>
						            	<dd>【电话预约】支付成功后，请拨打供应商电话，预约出行具体事宜，并将消费码提供给供应商，消费码确认后，
						            	供应商与您之间的订单合同才成立。</dd>
						            	<dd>预约确定出行事宜后，就可以开心出游啦</dd>
						            </dl>
						       </div>
						        <!--预定须知   e-->
						    </div>
						</div>
		           
		       		</div> 
           			 <!--线路相关     e-->
  			</div>
            <!--此线路简介  e-->
			

		</div>
		<!--footer end-->
		<!--在现咨询的弹出内容   s-->
		<div id="forward1" class="mui-popover mui-popover-action mui-popover-bottom">
			<div class="mui-card">
				<div class="mui-card-header mui-card-media">
				    <img src="../../img/touxiang.jpg" />
					<div class="mui-media-body" style="position: relative;">
						小M
						<p>发布于 2016-06-30 15:30</p>
						<a class="mui-card-link" href="#forward" style="position: absolute;right: -16px;top: -4px;"></a>
					</div>
				</div>
				<div class="mui-card-content" style="padding: 12px;">
					<dl>
						<dd>营业电话:<i style="visibility: hidden;">即</i>4008-197-888转6417</dd>
						<dd>营业时间:<i style="visibility: hidden;">即</i>09:00-22:00</dd>
					</dl>
				</div>
				<div class="mui-card-footer">
					<a class="mui-col-xs-6 cardLink" id="line">在线咨询</a>
					<a class="mui-col-xs-6 cardLink"  onclick="dial()">拨打电话</a>
				</div>
			</div>
		</div>
		<!--在线咨询弹出的内容  e-->
		<!--footer start-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active footLink" data-id="home" href="#forward1">
				<span class="mui-tab-label">咨询</span>
			</a>
			<a class="mui-tab-item footLink" data-id="tripline" href="javascript:void(0);" id="order"> 
				<span class="mui-tab-label">立即预定</span>
			</a>
		</nav>
		<script src="../../js/jquery.min.js" type="text/javascript"></script>
		<script src="../../js/immersed.js" type="text/javascript"></script>
		<script src="../../js/mui.min.js" type="text/javascript"></script>
		<script src="../../js/vue.min.js" type="text/javascript"></script>
		<script src="../../js/us/URL.js" type="text/javascript"></script>
		<script type="text/javascript">
		    mui.init();
			//点击在线咨询
			$("#line").on("tap",function(){
				//方案一:打开mui的聊天机器人界面
				//mui.openWindow({
						//url:"im-chat.html",
				//})
				//方案二:调用QQ进行客服聊天的问题              
                    if (plus.os.name == "Android") {
                       	if(plus.runtime.isApplicationExist({pname:'com.tencent.mobileqq',action:'qq://'})){
							var main = plus.android.runtimeMainActivity();
							var Intent = plus.android.importClass('android.content.Intent');
							var Uri = plus.android.importClass('android.net.Uri');
							var intent = new Intent(Intent.ACTION_VIEW, Uri.parse("mqqwpa://im/chat?chat_type=wpa&uin=2812390541"));
							main.startActivity(intent);
							}
                       	else{
							 mui.toast("检查到您未安装qq，请搜索下载？");
						    }
                    }
                    if (plus.os.name == "iOS") {
                        plus.runtime.launchApplication({
                            action: "mqq://im/chat?chat_type=wpa&uin=2812390541&version=1&src_type=web"
                        }, function(e) {
                            plus.nativeUI.confirm("检查到您未安装qq，请先到appstore搜索下载？", function(i) {
                                if (i.index == 0) {
                                    iosAppstore("itunes.apple.com/cn/app/mqq/");
                                }
                            });
                        });
                    }
				});
			//直接拨打电话
			function dial(){
	           plus.device.dial("13509184607",false);
            }	
			function getDefaultData() {
				return {
					litpic: '',
					title: '',
					author: '',
					storeprice:'',
					time: '',
					content: ''
					}
				}
				//vue新建
				var vm = new Vue({
					el: '.mui-content',
					data: getDefaultData(),
					methods: {
						resetData: function() { 
							//重置数据
							//Object.assign(this.$data, getDefaultData());
						}
					}
				});
				//监听自定义事件，获取新闻详情
				document.addEventListener('get_detail', function(event) {
					var guid = event.detail.guid;
					if(!guid) {
						return;
					}
					//前页传入的数据，直接渲染，无需等待ajax请求详情后
					vm.litpic = event.detail.litpic;
					vm.title = event.detail.title;
					vm.author = event.detail.author;
					vm.time = event.detail.time;
					vm.storeprice=event.detail.storeprice;
					vm.id=event.detail.id;
//					alert(plus.storage.getItem("pic")+"zzzzzzz");
					//向服务端请求文章详情内容
					mui.ajax(testUrl.article + guid, {
						type: 'GET',
						dataType: 'json', //服务器返回json格式数据
						timeout: 15000, //15秒超时
						success: function(rsp) {
							vm.content = rsp.content;
						},
						error: function(xhr, type, errorThrown) {
							mui.toast('获取文章内容失败');
							//TODO 此处可以向服务端告警
						}
					});
				     var data2={column:"id,biaozhun,startcity,overcity,transport,lineday,linenight,bookcount,satisfyscore,feeinclude,features,jieshao,beizu,sellpoint"}
                     mui.getJSON(pageUrl.xlxq+"?id="+vm.id,data2,function(res){
                          		for(var i=0;i<res.length;i++){
                           	     document.getElementById("mianhao").innerText=Math.ceil(Math.random()*35)+res[i].id;
                           	     //住宿标准
                           	     document.getElementById("zhusu").innerText=res[i].biaozhun;
                           	     //出发到达
                           	     document.getElementById("chufa").innerText=res[i].startcity;
                           	     document.getElementById("daoda").innerText="-"+res[i].overcity;
                           	     //交通方式
                           	     document.getElementById("ways").innerText=res[i].transport;
                           	     //出游天数
                           	     document.getElementById("tripDays").innerText=res[i].lineday+"天";
                           	     document.getElementById("tripDays2").innerText=res[i].linenight+"晚";
                           	     //销量
                           	     document.getElementById("xiaoliang").innerText=res[i].bookcount;
                           	     //满意度
                           	     document.getElementById("manyidu").innerText=res[i].satisfyscore+"%";
                           	     //费用信息
                           	     document.getElementById("item1").innerText=res[i].feeinclude;
                           	     //线路特色
                           	     document.getElementById("item2").innerHTML=res[i].features;
                           	     //行程介绍
                           	     document.getElementById("item3").innerHTML=res[i].jieshao;
                           	     //预定须知
                           	     document.getElementById("item4").innerHTML=res[i].beizu;
                           	     //卖点
                           	     document.getElementById("maidian").innerText=res[i].sellpoint;
                           	     
                          		}
                         });
				     var webview_order=null;
                 	//预加载订单页面  s
                     mui.plusReady(function(){
                   		//将出发日期暂存在本地
                   		var yourDate=document.getElementById("info").innerHTML;
                   		plus.storage.setItem("yourDate",yourDate);
                      	webview_order=mui.preload({
                      		url :'order.html',
                      		styles:{
                      			    "render": "always",
									"popGesture": "hide",
									"bounce": "vertical",
									"bounceBackground": "#efeff4",
                      		}
                      	});
                    
                     });
                     //预加载订单页面   e
				     //点击立即预定的时，进入加入订单页面
	              	document.getElementById("order").addEventListener("tap",function(){
	                	open_order(guid,vm.title,vm.litpic,vm.storeprice,vm.id);
	                	plus.storage.setItem("pic",vm.litpic);//点击立即预定的时候将订单图片传入待支付订单列表页
//	                	var picList=plus.storage.getItem("pic");
//	                	mui.fire(webview_orders,"orders_get",{
//	                		pics:picList
//	                	})
	                	
	              	});
					//打开订单
						function open_order(guid,title,litpic,storeprice,id){
							//若订单页尚未加载完成，则等待执行
							if(!webview_order) {
								setTimeout(function() {
									open_order(guid);
								}, 100);
							}
							//触发自窗户口的事件
							mui.fire(webview_order,"get_order",{
								guid:vm.title,
								title:vm.title,
								litpic:vm.litpic,
								storeprice:vm.storeprice,
								id:vm.id
							})
							setTimeout(function(){
								webview_order.show("slide-in-right",300);
							},150);
						}
				});
				//重写返回逻辑
				mui.back = function() {
					plus.webview.currentWebview().hide("auto", 300);
					//动画结束后，恢复默认值
					setTimeout(function() {
						window.scrollTo(0, 0);
						vm.resetData();
					}, 300);
				}
			</script>
	    <script type="text/javascript">
				//日期选择
		        	$(".dateItem").click(function(){
		        		$(this).css({"background":"#35d0c9"}).siblings().css({"background":"#fff"});
		        		$(this).find("li.dateList span").css({"color":"#fff"});
		        		$(this).siblings().find("li.dateList span").css({"color":"#323232"});
		        	});
	        		var info=document.getElementById("info");
	        	//日历的隐藏和显示
		        	$("#date").click(function(){
						var dDate = new Date();
						dDate.setFullYear(2016, 6, 27);
						var minDate = new Date();
						minDate.setFullYear(2010, 0, 1);
						var maxDate = new Date();
						maxDate.setFullYear(2020, 11, 25);
						plus.nativeUI.pickDate(function(e) {
							var d = e.date;
							info.innerText = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
							plus.storage.setItem("Time",info.innerText);
						}, function(e) 
						{
							}, 
							{
							    title: "请选择日期",
								date: dDate,
								minDate: minDate,
								maxDate: maxDate
								});
	        	    });
	        </script>
	
	    
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	</body>

</html>